import {useEffect, useState} from 'react';
// @ts-ignore
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendPlain';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markPoint';
import {queryPaymentPieData} from "@/pages/m/Analyse/service";

export type TypeBarItem = {
  name: string;
  value: number;
}
const YearPaymentPieChart = (props: {year: string}) => {

  // 图表数据源
  const [data, setData] = useState<TypeBarItem[]>()
  useEffect(() => {
    queryPaymentPieData({year: props.year}).then((res)=>{
      if (res.status === "done"){
        // 获取成功
        setData(res.data)
      }
    })
  }, [props.year]);

  // 图表参数
  const [main, setMain] = useState("")
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {},
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     // magicType: { show: true, type: ['line', 'bar'] },
    //     // restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
   // 以下为bar专用
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: data?.map(item => (item.name))
    },
    series: [
      {
        // name: props.year,
        // type: 'pie',
        type: 'bar',
        data: data?.map(item=>(item.value)),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          formatter: function (data: {value: number}) {
            return data.value + "元"
          }
        }
      }
      // {
      //   name: '金额',
      //   type: 'pie',
      //   radius: [20, 60],
      //   label: {
      //     alignTo: 'edge',
      //     formatter: '{name|{b}}\n{time|{c} 元}',
      //     minMargin: 5,
      //     edgeDistance: 10,
      //     lineHeight: 15,
      //     rich: {
      //       time: {
      //         fontSize: 10,
      //         color: '#999'
      //       }
      //     }
      //   },
      //   labelLine: {
      //     length: 15,
      //     length2: 0,
      //     maxSurfaceAngle: 80
      //   },
      //   emphasis: {
      //     itemStyle: {
      //       shadowBlur: 10,
      //       shadowOffsetX: 0,
      //       shadowColor: 'rgba(0, 0, 0, 0.5)'
      //     }
      //   },
      //   tooltip: {
      //     valueFormatter: function (value: number) {
      //       return value + ' 元';
      //     }
      //   },
      //   // 饼图数据源引用
      //   data: data
      // }
      ]
  }
  useEffect(() => {
    const node = document.getElementById("thisYear_payPie_chart_1")
    // @ts-ignore
    setMain(node)
  }, [main]);
  if (main !== ""){
    const myChart = echarts.init(main);
    myChart.setOption(option)
  }
  return (
    <div style={{width: `100%`, height: 500}} id={"thisYear_payPie_chart_1"}/>
  )
}
export default YearPaymentPieChart;
